<template>
    <div class="comment w-full h-full">
        <div class="pushCommen divCommon min-h-0  bg-red-100">
            <div class="title h-[3.125rem] leading-[3.125rem]">锐评</div>
            <div v-if="auth" class="pushComment flex">
                <div class="avatar w-[10%] flex  justify-center">
                    <n-avatar round :size="50" :src="authStore.userAvatar" object-fit="cover"
                        fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
                </div>
                <div class="input w-[85%]">
                    <blog-input @submit="sub" ref="blogInput" />
                </div>
            </div>
            <div v-else class="pushComment text-center text-[1.125rem] text-[#999] mt-2 mb-8 cursor-pointer align-middle" @click="goLogin">
                请先登录
            </div>
        </div>
        <div class="content divCommon mt-2 pb-5">
            <showComments :data="commentList" @sucess="success" />
        </div>
    </div>

</template>

<script setup lang="ts">
import BlogInput from '../input/blogInput.vue';
import ShowComments from './showComments/showComments.vue';
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler';
import { getArticleComments } from '@/api/article/index';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { pushArticleComment } from '@/api/article/index';
import { useMessage } from 'naive-ui'
import { useAuthStore } from '@/stores/user';
import { secureStorage } from '@/utils/secureStorage';
const auth = localStorage.getItem('auth')
console.log(secureStorage.get('token')
);

const authStore = useAuthStore();
const message = useMessage()
const blogInput = ref()
const $router = useRouter()
let inputContent = ref();
let commentList = ref()
const props = defineProps({
    data: {
        type: Object,
        required: true,
        default: {}
    }
})
const goLogin = () => { 
    $router.push({ path: '/login' })
    localStorage.setItem('path', $router.currentRoute.value.path)
    localStorage.setItem('query', JSON.stringify($router.currentRoute.value.query))
    
}
onMounted(() => {
    // 获取评论数据
    getComment()
})

const getComment = async () => {
    let res = await AsyncTaskHandler.handleSingleTask(getArticleComments($router.currentRoute.value.query.id))
    res.code == 0 ? commentList.value = res.data : ''
}
const success = () => {
    getComment()
}
const sub = async (e: any) => {
    inputContent.value = e
    inputContent.value.articleId = props.data.articleId
    // inputContent.value.articleUserId = props.data.authorId
    // 提交评论
    let res = await AsyncTaskHandler.handleSingleTask(pushArticleComment(inputContent.value))
    res.code == 0 ? blogInput.value.reset() || message.success(res.data) && getComment()  : message.error(res.msg)
}

</script>

<style scoped lang="scss">
.title {
    display: flex;
    align-items: center;
    font-size: 24px;
}

.title::before {
    content: "";
    display: inline-block;
    width: .125rem;
    height: 3.125rem;
    background-color: #000;
    margin-right: 8px;
}
</style>